import React from 'react';
import { Tabs, Card, List, Tag, Space } from 'antd';
import { FireOutlined, ClockCircleOutlined, EnvironmentOutlined } from '@ant-design/icons';
import styled from 'styled-components';

const { TabPane } = Tabs;

const StyledCard = styled(Card)`
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
`;

const InterestTag = styled(Tag)`
  margin: 4px;
  padding: 4px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    transform: scale(1.05);
  }
`;

const Discover: React.FC = () => {
    const interests = [
        '运动健身', '音乐', '美食', '旅行', '电影', '读书',
        '摄影', '宠物', '游戏', '艺术', '科技', '时尚'
    ];

    const activities = [
        {
            id: 1,
            title: '周末篮球友谊赛',
            location: '市体育馆',
            time: '2024-03-20 14:00',
            participants: 12,
            tags: ['运动', '社交']
        },
        {
            id: 2,
            title: '城市摄影探索',
            location: '市中心广场',
            time: '2024-03-21 09:00',
            participants: 8,
            tags: ['摄影', '户外']
        },
        {
            id: 3,
            title: '读书分享会',
            location: '城市图书馆',
            time: '2024-03-22 19:00',
            participants: 15,
            tags: ['读书', '文化']
        }
    ];

    const tabItems = [
        {
            key: '1',
            label: (
                <span>
                    <FireOutlined /> 热门活动
                </span>
            ),
            children: (
                <List
                    itemLayout="vertical"
                    dataSource={activities}
                    renderItem={item => (
                        <StyledCard hoverable>
                            <List.Item
                                key={item.id}
                                actions={[
                                    <Space><ClockCircleOutlined /> {item.time}</Space>,
                                    <Space><EnvironmentOutlined /> {item.location}</Space>,
                                    <Space>已有 {item.participants} 人参与</Space>
                                ]}
                            >
                                <List.Item.Meta
                                    title={item.title}
                                    description={
                                        <Space>
                                            {item.tags.map(tag => (
                                                <Tag key={tag} color="orange">{tag}</Tag>
                                            ))}
                                        </Space>
                                    }
                                />
                            </List.Item>
                        </StyledCard>
                    )}
                />
            ),
        },
        {
            key: '2',
            label: (
                <span>
                    <ClockCircleOutlined /> 最新活动
                </span>
            ),
            children: (
                <List
                    itemLayout="vertical"
                    dataSource={activities}
                    renderItem={item => (
                        <StyledCard hoverable>
                            <List.Item
                                key={item.id}
                                actions={[
                                    <Space><ClockCircleOutlined /> {item.time}</Space>,
                                    <Space><EnvironmentOutlined /> {item.location}</Space>,
                                    <Space>已有 {item.participants} 人参与</Space>
                                ]}
                            >
                                <List.Item.Meta
                                    title={item.title}
                                    description={
                                        <Space>
                                            {item.tags.map(tag => (
                                                <Tag key={tag} color="orange">{tag}</Tag>
                                            ))}
                                        </Space>
                                    }
                                />
                            </List.Item>
                        </StyledCard>
                    )}
                />
            ),
        },
    ];

    return (
        <div>
            <StyledCard>
                <h3>兴趣分类</h3>
                <div style={{ marginTop: 16 }}>
                    {interests.map(interest => (
                        <InterestTag key={interest} color="blue">
                            {interest}
                        </InterestTag>
                    ))}
                </div>
            </StyledCard>

            <Tabs defaultActiveKey="1" items={tabItems} />
        </div>
    );
};

export default Discover; 